{extend name="main"}
{block name="style"}
{css href="__PLUGIN_SRC__/Swiper/swiper.min.css"}
<style type="text/css">
    .banner-container {
      width: 100%;
      height: 265px;
    }
    .banner-container .swiper-slide a{width:100%;}
    .banner-container .swiper-slide img{width:100%;height: 265px;}
    .banner-container .swiper-pagination-bullet-active{background:#fff;}
	.text-white .el-tabs__item{color: #fff;}
	.el-tabs__nav-wrap::after{display: none;}
	.el-tabs__header{margin-bottom: 1px;}
	.rounded-0 .el-textarea__inner{border-radius: 0;}
	.search .el-input__inner{border-left: 0;}
	.find-border-top-0 .border-top:nth-of-type(1){border-top: 0 !important;}
  .search-bg{background-image: url(__TEMPLATE_STATIC__/home_searchbar_img_bg.png);background-size: 100% 100%;}
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="container-xl">
	{xycms:hasads alias="news_banner"}
	<div class="swiper-container banner-container mt-3">
		<div class="swiper-wrapper">
			{xycms:ads alias="news_banner" name='v' length="9"}
		  	<div class="swiper-slide text-v-center">
		  		{empty name="v.url"}
		      	<a class="s {$v.ads_icon?'ads-icon':''}" title="{$v.title}">
		  		{else/}
		      	<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
		  		{/empty}
		      		<img src="{xycms:web name="imgurl"/}{$v.path}">
		      	</a>
		  	</div>
			{/xycms:ads}
		</div>
		<div class="swiper-pagination"></div>
	</div>
	{/xycms:hasads}
</div>
<div class="search-bg">
<div class="container-xl">
	<div class="search w-75 mx-auto py-5">
		<el-form @submit.native.prevent="sendSearch" class="shadow">
			<el-input placeholder="请输入关键字" v-model="search.key" class="input-with-select"
			clearable>
				<i slot="prepend" class="el-icon-search"></i>
			    <el-button native-type="submit" slot="append">搜资讯</el-button>
			</el-input>
		</el-form>
	</div>
	<div class="px-3 bg-white shadow">
		<el-tabs v-model="activeName" :before-leave="changeTabs">
		    <el-tab-pane label="全部" name="all" ></el-tab-pane>
			{xycms:articlecatelist name="v" alias="find"}
		    <el-tab-pane label="{$v.title}" name="{$v.alias}" ></el-tab-pane>
		    {/xycms:articlecatelist}
		</el-tabs>
	</div>
</div>
</div>
<div class="container-xl py-3">
	<div class="flex flex-top">
		<div class="flex-1 shadow">
			{xycms:articlepage name="v" alias="$alias"}
			<div class="bg-white p-4 border-bottom">
				<div class="flex flex-center pb-3">
					{notempty name="v.thumb"}
					{volist name="v.thumb" id="thumb" length="1"}
					<div class="bg-white w-40px h-40px text-truncate rounded mr-3">
						<img src="{$thumb}" style="object-fit: contain;width: 100%;height: 100%;">
					</div>
					{/volist}
					{/notempty}
					<div class="flex-1">
						<a href="/article/content/{$v.id}.html" class="el-link" target="_blank"><h6 class="mb-0"><span class="{$v.cla}">{$v.title}</span></h6></a>
					</div>
				</div>
				<div class="text-secondary">{$v.desc}</div>
				<div class="flex text-secondary pt-3">
					<div class="pr-3">文章来源：{$v.source}</div>
					<div class="pr-3"><i class="el-icon-time mr-1"></i>{$v.start_time|date="Y-m-d"}</div>
					<div><i class="el-icon-view mr-1"></i>{$v.view}</div>
				</div>
			</div>
			{/xycms:articlepage}
			{notempty name="article_"}
			<div class="text-center bg-white py-3">
				{$article_->render()|raw}
			</div>
			{/notempty}
		</div>
		<div class="w-300px ml-3">
			<div class="ads">
				{xycms:ads alias="article_list" name='v' length='3'}
		      	<div class="text-v-center shadow mb-3">
		      		{empty name="v.url"}
			      	<a title="{$v.title}" class="{$v.ads_icon?'ads-icon':''}">
		      		{else/}
			      	<a href="{$v.url}" class="s {$v.ads_icon?'ads-icon':''}" target="_blank" title="{$v.title}">
		      		{/empty}
						<img src="{xycms:web name="imgurl"/}{$v.path}" class="w-300px">
			      	</a>
		      	</div>
				{/xycms:ads}
			</div>
			<div class="bg-white p-3 shadow">
				<div class="flex mb-3">
					<div class="flex-1 block-title-before pb-2">热门资讯</div>
				</div>
				<ol class="text-left mb-0 pl-3">
					{xycms:articlelist name="v" alias="hot"}
					<li>
						<a href="/article/content/{$v.id}.html" class="pb-2 el-link el-link--info text-truncate d-block"><span class="{$v.cla}">{$v.title}</span></a>
					</li>
					{/xycms:articlelist}
				</ol>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
{js href="__PLUGIN_SRC__/Swiper/swiper.min.js"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			activeName: '{$alias}',
			search:{
				key:'{notempty name=":request()->get('key')"}{:request()->get("key")}{/notempty}'
			},
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			sendSearch(){
				window.location.href="?key="+this.search.key
			},
			changeTabs(val,oldVal){
				window.location.href='/article/type/'+val+'.html';
			}
		})
	});
	{xycms:hasads alias="pc_news_banner"}
    var swiper = new Swiper('.banner-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      autoplay:true
    });
	{/xycms:hasads}
</script>
{/block}